<template>
	<view class="tech">
		<Top :box='true' :Black="true" @change='change' :types='types'></Top>
		<view class="scroll">
			<!-- <view class="big_box">
				<view class="box_h" v-for="(item,i) in shoplist" :key="i" @click="goBrief(item.id)">
					<view class="box_img">
						<image class="imk" :src="item.image_src"></image>
						<view class="qian">{{item.type==1?'摄影师':'化妆师'}}</view>
					</view>
					<view class="nam_box">
						<view class="name">{{item.name}}</view>
						<view class="dian">
							<view @click.stop="changecang(item)" :class="item.do==0?'icon':'dians'"></view>
							{{item.num}}
						</view>
					</view>
				</view>
			</view> -->
			<zero-waterfall :list="shoplist" type="5" styleType="4" :status="status">
			</zero-waterfall>
		</view>
		<view class="poskl" @click="goLick">
			<view class="xin"></view>
			喜欢
		</view>
		<view style="height:160upx;"></view>
		<view class="tabbar">
			<bottomBox :type='type'></bottomBox>
		</view>

	</view>
</template>

<script>
	import bottomBox from '../../components/navBox/bottom.vue'
	import Top from '../../components/navBox/top.vue'
	export default {
		data() {
			return {
				title: '',
				types: 0, // 0全部 1摄影 2造型
				type: 'four',
				shoplist: [],
				page: 1,
				lastPage: 0,
				status: 0
			}
		},
		components: {
			bottomBox,
			Top
		},
		computed: {

		},
		onLoad() {
			this.getlist();
		},
		mounted() {

		},
		onReachBottom() {
			if (this.page >= this.lastPage) {
				this.$wanlshop.msg('我是有底线的!')
			} else {
				this.status = 0;
				this.page++;
				this.getlist();
			}
		},
		methods: {
			// 切换 全部 摄影 造型
			change(e) {
				this.types = e;
				this.page = 1;
				this.status = 1;
				this.getlist();
			},
			// 点击喜欢
			goLick() {
				uni.navigateTo({
					url: './like'
				})
			},
			// 获取老师列表
			getlist() {
				this.$request({
					url: 'wedding/wedding_worker',
					method: 'POST',
					data: {
						page:this.page,
						shop_id: this.$store.state.shopsname.id,
						type: this.types,
						user_id: uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0,
						col: 0,//1 喜欢
						wedding_id: 0,//摄影分类id
					}
				}).then(res => {
					if (res.data.code == 1) {
						if (this.page == 1) {
							this.shoplist = res.data.data.data;
						} else {
							this.shoplist.push(...res.data.data.data);
						}
						this.lastPage = res.data.data.last_page;
						uni.hideLoading();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1000
						});
						uni.hideLoading();
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background: #111;
	}
</style>
<style scoped lang="scss">
	.tabbar {
		position: absolute;
	}

	.tech {
		width: 750upx;
	}

	.scroll {
		.big_box {
			width: 686upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 18upx;

			.box_h {
				width: 336upx;
				margin-bottom: 14upx;
				background: #161616;
				border-radius: 8rpx;

				.box_img {
					width: 100%;
					height: 336upx;
					border-radius: 8upx;
					overflow: hidden;
					position: relative;

					.imk {
						width: 100%;
						height: 100%;
					}

					.qian {
						position: absolute;
						left: 20upx;
						top: 20upx;
						width: 100upx;
						height: 48upx;
						background: rgba(17, 17, 17, 0.5);
						border-radius: 24upx;
						text-align: center;
						color: #EEEEEE;
						font-size: 22upx;
						line-height: 48upx;
					}
				}

				.nam_box {
					width: 304upx;
					margin: 28upx auto;
					display: flex;
					justify-content: space-between;

					.name {
						color: #fff;
						font-size: 28upx;
						line-height: 32upx;
					}

					.dian {
						color: #999999;
						font-size: 26upx;
						line-height: 30upx;

						.icon {
							width: 30upx;
							height: 30upx;
							background: url(../../static/teacher/dian.png)no-repeat center;
							background-size: 100%;
							display: inline-block;
							vertical-align: middle;
							margin-top: -8upx;
							margin-right: 8upx;

						}

						.dians {
							display: inline-block;
							vertical-align: middle;
							margin-top: -8upx;
							margin-right: 8upx;
							width: 30upx;
							height: 30upx;
							background: url(../../static/teacher/dians.png)no-repeat center;
							background-size: 100%;
						}
					}
				}
			}
		}
	}

	.poskl {
		width: 90upx;
		height: 90upx;
		background: #303031;
		position: fixed;
		right: 32upx;
		bottom: 300upx;
		text-align: center;
		color: #EBEBEB;
		font-size: 20upx;
		border-radius: 45upx;
		border-top: 1upx solid transparent;

		.xin {
			width: 40upx;
			height: 40upx;
			background: url(../../static/teacher/xin.png)no-repeat center;
			background-size: 100%;
			margin: 0 auto;
			margin-top: 10upx;
		}
	}
</style>
